<template>
    <div :id="id" :style="this.styles"></div>
</template>

<script>
    import echarts from 'echarts'
    import {debounce} from '@/utils'

    export default {
        name: 'echarts',
        props: {
            id: String,
            styles: {
                type: Object,
                default: function () {
                    return {width: '3rem', height: '3rem'}
                }
            },
            option: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            others: {
                type: Object,
                default: function () {
                    return {}
                }
            },
            autoResize: {
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                charts: null
            }
        },
        mounted() {
            let that = this
            that.drawChart(that.id, that.option)
            if (that.autoResize) {
                that.__resizeHanlder = debounce(() => {
                    if (that.chart) {
                        that.chart.resize()
                    }
                }, 100)
                window.addEventListener('resize', that.__resizeHanlder)
            }
            that.charts.getZr().on('click', params => {
                const pointInPixel = [params.offsetX, params.offsetY];
                if (that.charts.containPixel('grid', pointInPixel)) {
                    let xIndex = that.charts.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
                    console.log(xIndex);
                    console.log(that.option.xAxis.data[xIndex]);
                    let xName = that.option.xAxis.data[xIndex]
                    /*事件处理代码书写位置*/
                    that.$emit('echarts-click', xIndex, xName)
                } else {
                    that.$emit('echarts-click', params)
                }
            });
        },
        watch: {
            option: {
                handler(n, o) {
                    this.drawChart(this.id, n)
                },
                deep: true
            }
        },
        methods: {
            drawChart(id, data) {
                const that = this
                that.charts = echarts.init(document.getElementById(id))
                that.charts.setOption(data)
            },
            echartsClick() {
                const that = this
                that.charts.on('click', data => {
                    console.log(data);
                    that.$emit('echarts-click', data)
                });
            }
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            if (this.autoResize) {
                window.removeEventListener('resize', this.__resizeHanlder)
            }
            this.chart.dispose()
            this.chart = null
        },
    }
</script>

<style scoped>

</style>
